<template>
  <div id="app">
    <!--  row行 col列  默认24列  span 是将24进行划分-->
    <el-row class="box">
      <el-col :span="5">
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-red"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-red"></div>
      </el-col>
    </el-row>

    <!-- 每列的间隙  gutter -->
    <el-row class="box" :gutter="30">
      <el-col :span="5">
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-red"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-red"></div>
      </el-col>
    </el-row>
    <!-- 偏移的份额 -->
    <el-row :gutter="20" class="box">
      <el-col :span="5" :offset="5">
        <div class="bg-red"></div>
      </el-col>
     
      <el-col :span="5" :offset="5">
        <div class="bg-yellow"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="box">
      <el-col :span="5" :offset="0">
        <div class="bg-yellow"></div>
      </el-col>
       <el-col :span="5" :offset="5">
        <div class="bg-red"></div>
      </el-col>
    </el-row>
    <!-- 对齐的方式 --> 
    <!-- 通过给行添加type属性，值为'flex' ,然后再写上justify 属性来控制子元素  start, center, end, space-between, space-around -->
    <el-row class="box" type='flex' justify="center">
      <el-col :span="5">
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-red"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-red"></div>
      </el-col>
    </el-row>
    <el-row class="box" type='flex' justify="space-around">
      <el-col :span="5">
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-red"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span="5">
        <div class="bg-red"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>
<style >
* {
  margin: 0;
  padding: 0;
}
</style>
<style lang='less' scoped>
.box {
  margin-bottom: 20px;
}
.bg-red {
  height: 200px;
  background-color: red;
}
.bg-yellow {
  height: 200px;
  background-color: yellow;
}
</style>
